<template>
  <div class="explore-achievements-page explore-themed full">
    <h2 class="explore-title">成就徽章</h2>
    <p class="explore-sub">完成任务或达成条件可获得积分与徽章</p>
    <!-- 移除顶部新增成就提示，由动画弹窗承担提示 -->
    <el-skeleton v-if="loading" rows="3" animated />
    <el-empty v-else-if="items.length===0" description="暂无成就" />
    <div v-else class="badge-grid">
      <div v-for="a in items" :key="a.id" class="badge modern-vintage" :class="{ earned: a.earned }">
        <div class="icon">🏅</div>
        <div class="info">
          <div class="title">{{ a.title }}</div>
          <div class="desc">{{ a.description || '—' }}</div>
          <div class="meta">
            <el-tag size="small" type="warning">+{{ a.reward_points }} 积分</el-tag>
            <el-tag size="small" v-if="a.earned" type="success">已获得</el-tag>
            <span v-if="a.earned_at" class="time">{{ new Date(a.earned_at).toLocaleString() }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { exploreApi } from '@/api/explore'

const items = ref([])
const loading = ref(false)
const newlyCount = ref(0)

const load = async () => {
  loading.value = true
  try {
    const { data } = await exploreApi.achievements()
    // 后端在列表时会懒授予，这里以 earned_at 是否在较新时间判断“新增”
    // 简化：直接统计 earned=true 的数量作为提示（页面级刷新不做细粒度对比）
    newlyCount.value = data.filter(x => x.earned && x.earned_at).length
    items.value = data
  } finally { loading.value = false }
}

onMounted(load)
</script>

<style scoped>
.mb-12 { margin-bottom: 12px; }
.badge-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:14px; }
.badge { display:flex; gap:12px; padding:14px; border:1px solid #eadfcd; border-radius:14px; background:linear-gradient(180deg,#fff,#faf6ef); align-items:flex-start; box-shadow:0 8px 18px rgba(0,0,0,.06); }
.badge .icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff8e6; box-shadow: inset 0 0 0 1px #f6d58e; }
.badge .title { font-weight:600; }
.badge .desc { color:#666; font-size:13px; margin:4px 0; }
.badge .meta { display:flex; gap:8px; align-items:center; font-size:12px; color:#888; }
.badge.earned { border-color:#f6d58e; background: linear-gradient(180deg,#fffdf7,#fffaf0); }
.badge .time { margin-left:4px; }
</style>
